<template>
  <div class="accountexpendbusiness">
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="登记起止时间：">
        <div class="block">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </el-form-item> -->
      <!-- <el-form-item label="开始时间：">
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="起止时间：">
        <el-date-picker
          v-model="value1"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="" class="el-icon-search" @click="onSubmit()"
          >查询</el-button
        >
        <el-button class="el-icon-check" @click="exaAll">通过</el-button>
        <el-button class="el-icon-close" @click="retnAll">退回</el-button>
      </el-form-item>
    </el-form>
    <!-- 支出申请表格 -->
    <div v-show="this.expapply">
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        ref="multipleTable"
        border
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        height="calc( 100vh - 220px)"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="font-size: 14px"
              size="small"
              @click="exa(scope.row)"
              >通过</el-button
            >
            <el-button
              type="text"
              style="color: #ff8888; font-size: 14px"
              size="small"
              @click="retn(scope.row)"
              >退回</el-button>
          </template>
        </el-table-column>

        <el-table-column type="index" label="序号" width="60px">
        </el-table-column>
        <el-table-column prop="ReviewResult" label="业务状态" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.ReviewResult == 0">未提交</span>
              <span v-else-if="scope.row.ReviewResult == 1">待审核</span>
              <span v-else-if="scope.row.ReviewResult == 2">审核退回</span>
              <span v-else-if="scope.row.ReviewResult == 9">审核通过</span>
              <span v-else-if="scope.row.ReviewResult == 3">制单打印</span>
              <span v-else-if="scope.row.ReviewResult == 4">财务到账</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Socialsecuritytype" label="参保类型" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.Socialsecuritytype == 0">其他</span>
              <span v-else-if="scope.row.Socialsecuritytype == 1">城居保</span>
              <span v-else-if="scope.row.Socialsecuritytype == 2">职保</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="姓名" width="90" />
        <el-table-column prop="gender" label="性别" width="60">
          <!-- <template slot-scope="scope">
            <div v-if="scope.row.GenderCode == 1">男</div>
            <div v-else>女</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="IdentityNum" label="身份证号" width="180" />
        <el-table-column prop="Balance" label="账户余额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.Balance, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OutMoney" label="支出金额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.OutMoney, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OperName" label="经办人" width="100">
        </el-table-column>
        <el-table-column prop="OperTime" label="经办时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.OperTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ReviewName" label="审核人" width="100">
        </el-table-column>
        <el-table-column prop="ReviewTime" label="审核时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.ReviewTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FinanceName" label="到账人" width="100">
        </el-table-column>
        <el-table-column prop="FinanceTime" label="到账时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.FinanceTime) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  API_ZHICHU_TJZC,
  API_ZHICHU_GO,
  API_ZHICHU_RETURN,
  API_ZHICHU_ACGVD,
} from "../../api/account";
export default {
  name: "",
  data() {
    return {
      msg: "账户支出审核",
      state: "", // 状态
      tableData: [],
      currentPage3: 1,
      expapply: false,
      options: [], // 操作员列表
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      multipleSelection: [], // 选中数据合集
      value: "", // 起止时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: [],
      value2: "",
    };
  },
  methods: {
    onSubmit() {
      // this.submit();
      this.expapply = true;
      let timestart = null;
      let timeend = null;
      if (
        this.value1[0] == "" ||
        this.value1[0] == null ||
        this.value1[1] == "" ||
        this.value1[1] == null
      ) {
        this.$message.warning("请选择起止时间！");
      } else {
        var reg = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
        var regExp = new RegExp(reg);
        console.log(reg.test(this.value1[0].toString()));
        console.log(reg.test(this.value1[1].toString()));
        if (regExp.test(this.value1[0]) && regExp.test(this.value1[1])) {
          timestart = this.value1[0];
          timeend = this.value1[1];
          console.log(1);
        } else {
          console.log(2);
          timestart =
            this.value1[0].getFullYear() +
            "-" +
            (this.value1[0].getMonth() + 1) +
            "-" +
            this.value1[0].getDate();
          timeend =
            this.value1[1].getFullYear() +
            "-" +
            (this.value1[1].getMonth() + 1) +
            "-" +
            this.value1[1].getDate();
        }
        console.log(timestart); // 开始时间
        console.log(timeend); // 结束时间
        let data = {
          SDT: timestart,
          EDT: timeend,
          ReviewResult: 1,
        };
        API_ZHICHU_ACGVD(data)
          .then((res) => {
            console.log(res);
            this.$message.success("查询成功！");
            this.tableData = res.ResList;
            // this.tableData = [];
            // res.ResList.map((item,index)=>{
            //   if(item.ReviewResult == 1){
            //     this.tableData.push(item);
            //   }
            // })
            console.log(this.tableData);
            // this.tableData = res.ResList;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    exa(row) {
      console.log("审核" + row.AccountID);
      let data = [
        {
          Id: row.Id,
        },
      ];
      API_ZHICHU_GO(data)
        .then((res) => {
          console.log(res);
          this.onSubmit();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    exaAll() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请先勾选数据！");
      } else {
        this.$confirm("确定通过审核?").then((_) => {
          let data = this.multipleSelection.map((item) => {
            return {
              Id: item.Id,
            };
          });
          API_ZHICHU_GO(data)
            .then((res) => {
              console.log(res);
              this.$message.success("审核成功!");
              this.onSubmit();
            })
            .catch((err) => {
              console.log(err);
            });
        });
      }
    },
    retn(row) {
      console.log("退回" + row.Id);
      let data = [
        {
          Id: row.Id,
        },
      ];
      API_ZHICHU_RETURN(data)
        .then((res) => {
          console.log(res);
          this.onSubmit();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 金额格式化
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    retnAll() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请先勾选数据！");
      } else {
        this.$confirm("确定退回审核?").then((_) => {
          let data = this.multipleSelection.map((item) => {
            return {
              Id: item.Id,
            };
          });
          API_ZHICHU_RETURN(data)
            .then((res) => {
              console.log(res);
              this.$message.success("退回成功！");
              this.onSubmit();
            })
            .catch((err) => {
              console.log(err);
            });
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // submit() {
    //   API_ZHICHU_TJZC()
    //     .then((res) => {
    //       console.log(res);
    //       this.tableData = res.ResList;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    nowTim() {
      this.value1[0] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
      this.value1[1] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
    },
  },
  created() {
    // this.submit();
    this.expapply = true;
    this.nowTim();
    this.onSubmit();
  },
};
</script>

<style scoped lang="scss">
.accountexpendbusiness {
  padding: 30px;
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
